<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由</title>
    <link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/vue2-animate.css" type="text/css">

    <script type="text/javascript" src="./lib/vue/vue.js"></script>
    <script type="text/javascript" src="./lib/vue/router/vue-router.js"></script>
    <style>

    </style>

</head>

<body>
    <div class="container" id="app">
        <h2>一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 <span style="color:red">
            this.$route.params</span>，可以在每个组件内使用。</h2>
        <ul>Vue2.0 路由使用
            <li>1. 定义路由组件</li>
            <li>2. 定义路由配置</li>
            <li>3. 创建路由对象，传入路由配置</li>
            <li>4. 创建和挂载根实例</li>
        </ul>

        <hr>

        <p>
            <router-link to="/user/1"> 用户1</router-link>
            <router-link to="/user/2"> 用户2</router-link>
        </p>


        <router-view></router-view>
    </div>
</body>


<script>
    // 定义组件
    const User = {
        template: "<div>User {{$route.params.id}}</div>"
    }

    // 创建路由对象
    const route = new VueRouter({
        routes: [{
            path: '/user/:id',
            component: User
        }]
    })

    // 创建和挂载根实例
    const app = new Vue({
        router: route
    }).$mount("#app")
</script>

</html>